<template>
  <div v-loading="loading1 || loading" class="activeCount">
    <el-table
      v-if="packGoodsTableData && packGoodsTableData.length > 0"
      border
      style="width: 100%"
      max-height="400"
      :data="packGoodsTableData"
    >
      <el-table-column
        label="商品编号"
        prop="goodsId"
        align="center"
        width="130"
        :resizable="false"
        fixed="left"
      />
      <el-table-column label="商品主图" align="center" :resizable="false" width="80">
        <template slot-scope="scope">
          <TableColumnGoodsImage :src="scope.row.goodsImg" />
        </template>
      </el-table-column>
      <el-table-column
        label="商品名称"
        prop="goodsName"
        align="center"
        :resizable="false"
      />
      <el-table-column
        label="商品类型"
        prop="type"
        align="center"
        width="90"
        :resizable="false"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type == 'lease'" type="success" size="small">租赁</el-tag>
          <el-tag v-else-if="scope.row.type == 'sale'" type="primary" size="small">售卖</el-tag>
          <el-tag v-else type="info" size="small">未知</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="totalMoney"
        :label="'累计销售金额\n累计租金金额'"
        align="center"
        width="120"
        :resizable="false"
      >
        <template slot-scope="scope">
          {{ scope.row.totalMoney.toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="totalCount"
        :label="'累计销售数量\n累计租赁数量'"
        align="center"
        width="120"
        :resizable="false"
      />
    </el-table>
    <div v-loading="loading">
      <div class="form-seach">
        <el-form ref="form" :rules="rules" :model="BindForm" label-width="90px" label-position="left">
          <el-form-item label="手机号:" prop="phone">
            <el-col :span="24">
              <el-input v-model="BindForm.phone" placeholder="请输入手机号" maxlength="11" class="cus-input" clearable />
            </el-col>
          </el-form-item>
          <el-form-item label="订单号:" prop="orderSn">
            <el-col :span="24">
              <el-input v-model="BindForm.orderSn" placeholder="请输入订单号" maxlength="30" class="cus-input" clearable />
            </el-col>
          </el-form-item>
          <el-form-item label="商品:" prop="goods">
            <el-col :span="24">
              <select-goods ref="selectGoods" v-model="BindForm.goods" />
            </el-col>
          </el-form-item>
          <el-form-item prop="storeId" label="门店:">
            <el-col :span="24">
              <store-select ref="storeSelect" v-model="BindForm.storeId" field="id" />
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">筛选</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="ele-table">
        <el-table ref="table" :data="BindTable" border max-height="600" :empty-text="loading ? '数据加载中' : (isSearch ? '未找到相关的订单' : '暂无订单')">
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="80"
            :resizable="false"
            fixed="left"
          />
          <el-table-column
            label="订单号"
            prop="orderSn"
            align="center"
            width="220"
            :resizable="false"
            fixed="left"
          />
          <el-table-column
            label="归属门店"
            prop="storeName"
            align="center"
            :resizable="false"
            min-width="200"
          />
          <el-table-column
            label="购买用户"
            prop="username"
            align="center"
            :resizable="false"
            width="110"
          />
          <el-table-column
            label="手机号"
            prop="phone"
            align="center"
            :resizable="false"
            width="110"
          />
          <el-table-column
            label="商品编号"
            prop="goodsId"
            align="center"
            width="130"
            :resizable="false"
          />
          <el-table-column label="商品主图" align="center" :resizable="false" width="80">
            <template slot-scope="scope">
              <TableColumnGoodsImage :src="scope.row.goodsImg" />
            </template>
          </el-table-column>
          <el-table-column
            label="商品名称"
            prop="goodsName"
            align="center"
            :resizable="false"
            min-width="200"
          />
          <el-table-column
            label="商品规格"
            prop="goodsSkuNames"
            align="center"
            width="150"
            :resizable="false"
          />
          <el-table-column
            label="商品类型"
            prop="type"
            align="center"
            width="90"
            :resizable="false"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.type == 'lease'" type="success" size="small">租赁</el-tag>
              <el-tag v-else-if="scope.row.type == 'sale'" type="primary" size="small">售卖</el-tag>
              <el-tag v-else type="info" size="small">未知</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            :label="'购买数量\n租赁数量'"
            prop="count"
            align="center"
            :resizable="false"
            width="90"
          />
          <el-table-column
            :label="'购买金额\n租金金额'"
            prop="money"
            align="center"
            :resizable="false"
            width="90"
          >
            <template slot-scope="scope">
              {{ scope.row.money.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column
            label="下单时间"
            prop="addTime"
            align="center"
            width="180"
            :resizable="false"
          />
          <el-table-column
            label="操作"
            header-align="center"
            align="center"
            fixed="right"
            width="90"
            :resizable="false"
          >
            <!-- TODO SLJ 下面需要跳转到订单详情，目前是随便跳的页面 -->
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="
                  $router.push({
                    name: 'YWC',
                    query: { orderSn: scope.row.orderSn }
                  })
                "
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <div />
        <div>
          <el-pagination
            background
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size="limit"
            :pager-count="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="pageSizeChange"
            @current-change="currentPageChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { packGoodsDetail, orderList } from '@/api/market'
import StoreSelect from '../../../../components/StoreSelect/index'
import SelectGoods from '../../../../components/SelectGoods/index'
import TableColumnGoodsImage from '../../../../components/TableColumnGoodsImage/index'
export default {
  name: 'ActiveCount',
  components: { TableColumnGoodsImage, SelectGoods, StoreSelect },
  props: {
    id: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    var validatePhone = (rule, value, callback) => {
      var Regx = /^1[3-9]\d{9}$/
      if (value && value.length > 0 && !Regx.test(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    return {
      loading1: false,
      packGoodsTableData: [],
      page: 1,
      limit: 10,
      total: 0,
      loading: false,
      isSearch: false,
      BindForm: {
        phone: null,
        orderSn: null,
        goods: null,
        storeId: null
      },
      BindTable: [],
      rules: {
        phone: [
          { validator: validatePhone, trigger: 'change' }
        ]
      }
    }
  },
  created() {
    const vm = this

    vm.loading1 = true

    packGoodsDetail({
      id: vm.id
    }).then(res => {
      vm.loading1 = false
      vm.packGoodsTableData = res.data.data
    }).catch(res => {
      vm.loading1 = false
      if (res && res.data && res.data.errno !== 0) {
        this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
      }
    })

    this.loadTableData()
  },
  methods: {
    resetForm() {
      const vm = this
      vm.$refs.form.resetFields()
      vm.reloadTableData()
    },
    search() {
      const vm = this
      vm.$refs.form.validate((valid) => {
        if (valid) {
          vm.reloadTableData()
        }
      })
    },
    pageSizeChange(pageSize) {
      const vm = this

      vm.limit = pageSize

      vm.$refs.form.validate((valid) => {
        if (valid) {
          vm.reloadTableData()
        }
      })
    },
    currentPageChange(page) {
      const vm = this

      vm.page = page

      vm.$refs.form.validate((valid) => {
        if (valid) {
          vm.loadTableData()
        }
      })
    },
    reloadTableData() {
      const vm = this

      vm.page = 1
      vm.total = 0
      vm.BindTable = []
      vm.loadTableData()
    },
    loadTableData() {
      const vm = this

      vm.isSearch = false

      const data = {
        id: vm.id,
        page: vm.page,
        limit: vm.limit
      }

      if (vm.BindForm.phone && vm.BindForm.phone.length > 0) {
        data['phone'] = vm.BindForm.phone
        vm.isSearch = true
      }

      if (vm.BindForm.orderSn && vm.BindForm.orderSn.length > 0) {
        data['orderSn'] = vm.BindForm.orderSn
        vm.isSearch = true
      }

      if (vm.BindForm.storeId && vm.BindForm.storeId > 0) {
        data['storeId'] = parseInt(vm.BindForm.storeId)
        vm.isSearch = true
      }

      if (vm.BindForm.goods) {
        data['goodsId'] = parseInt(vm.BindForm.goods.goodsId)
        vm.isSearch = true
      }

      vm.loading = true

      orderList(data).then(res => {
        vm.loading = false
        vm.total = res.data.data.total
        vm.BindTable = res.data.data.data ? res.data.data.data : []
      }).catch(res => {
        vm.loading = false
        if (res && res.data && res.data.errno !== 0) {
          this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .form-seach {
    padding: 20px 30px;
    padding-bottom: 0px;
    margin: 30px 0;
    border: 1px solid #eeeeee;
    .cus-input {
      max-width: 400px;
    }
  }
  .ele-content {
    width: 100%;
    .ele-to-sl {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
    }
  }
  .ele-table,
  .pagination {
    margin-bottom: 30px;
  }
  .pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>
